<aside id="rightbar">

  <div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#users" aria-controls="users" role="tab" data-toggle="tab"><i class="fa fa-users"></i></a></li>
      <li role="presentation"><a href="#history" aria-controls="history" role="tab" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
      <li role="presentation"><a href="#friends" aria-controls="friends" role="tab" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-cog"></i></a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="users">
        <h6><strong>在线用户</strong></h6>

        <ul>

          <li class="online">
            <div class="media">
              <a class="pull-left thumb thumb-sm" role="button" tabindex="1">
                <!-- <img class="media-object img-circle" src="assets/images/ici-avatar.jpg" alt> -->
                <i class="fa fa-user-circle-o fa-2x"></i>
              </a>
              <div class="media-body">
                <span class="media-heading">张三</span>
                <small><i class="fa fa-map-marker"></i>北京市奥森公园</small>
                <span class="badge badge-outline status"></span>
              </div>
            </div>
          </li>
          <li class="busy">
            <div class="media">
              <a class="pull-left thumb thumb-sm" role="button" tabindex="0">
                                                <i class="fa fa-user-circle-o fa-2x"></i>
                                                <!-- <img class="media-object img-circle" src="assets/images/random-avatar2.jpg" alt> -->
                                            </a>
              <div class="media-body">
                <span class="media-heading">李四</span>
                <small><i class="fa fa-map-marker"></i>北京市奥森公园</small>
                <span class="badge badge-outline status"></span>
              </div>
            </div>
          </li>

        </ul>

        <h6>离线用户</h6>

        <ul>

          <li class="offline">
            <div class="media">
              <a class="pull-left thumb thumb-sm" role="button" tabindex="0">
                                                <i class="fa fa-user-circle-o fa-2x"></i>
                                                <!-- <img class="media-object img-circle" src="assets/images/random-avatar4.jpg" alt> -->
                                            </a>
              <div class="media-body">
                <span class="media-heading">李四</span>
                <small><i class="fa fa-map-marker"></i>北京市奥森公园</small>
                <span class="badge badge-outline status"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div role="tabpanel" class="tab-pane" id="history">
        <h6><strong>聊天记录</strong></h6>

        <ul>

          <li class="online">
            <div class="media">
              <a class="pull-left thumb thumb-sm" role="button" tabindex="0">
                                                <i class="fa fa-user-circle-o fa-2x"></i>
                                                <!-- <img class="media-object img-circle" src="assets/images/ici-avatar.jpg" alt> -->
                                            </a>
              <div class="media-body">
                <span class="media-heading">李四</span>
                <small>我已经到了</small>
                <span class="badge badge-outline status"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div role="tabpanel" class="tab-pane" id="friends">
        <h6><strong>好友列表</strong></h6>
        <ul>

          <li class="online">
            <div class="media">

              <a class="pull-left thumb thumb-sm" role="button" tabindex="0">
                                                <i class="fa fa-user-circle-o fa-2x"></i>
                                            </a>
              <span class="badge bg-lightred unread">3</span>

              <div class="media-body">
                <span class="media-heading">李四</span>
                <small><i class="fa fa-map-marker"></i>北京市奥森公园</small>
                <span class="badge badge-outline status"></span>
              </div>

            </div>
          </li>

        </ul>
      </div>

      <div role="tabpanel" class="tab-pane" id="settings">
        <h6><strong>聊天设置</strong></h6>

        <ul class="settings">

          <li>
            <div class="form-group">
              <label class="col-xs-8 control-label">显示离线用户</label>
              <div class="col-xs-4 control-label">
                <div class="onoffswitch greensea">
                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-offline" checked="">
                  <label class="onoffswitch-label" for="show-offline">
                                                        <span class="onoffswitch-inner"></span>
                                                        <span class="onoffswitch-switch"></span>
                                                    </label>
                </div>
              </div>
            </div>
          </li>

          <li>
            <div class="form-group">
              <label class="col-xs-8 control-label">消息历史</label>
              <div class="col-xs-4 control-label">
                <div class="onoffswitch greensea">
                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-history" checked="">
                  <label class="onoffswitch-label" for="show-history">
                                                        <span class="onoffswitch-inner"></span>
                                                        <span class="onoffswitch-switch"></span>
                                                    </label>
                </div>
              </div>
            </div>
          </li>

          <li>
            <div class="form-group">
              <label class="col-xs-8 control-label">显示位置</label>
              <div class="col-xs-4 control-label">
                <div class="onoffswitch greensea">
                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-location" checked="">
                  <label class="onoffswitch-label" for="show-location">
                                                        <span class="onoffswitch-inner"></span>
                                                        <span class="onoffswitch-switch"></span>
                                                    </label>
                </div>
              </div>
            </div>
          </li>

          <li>
            <div class="form-group">
              <label class="col-xs-8 control-label">通知</label>
              <div class="col-xs-4 control-label">
                <div class="onoffswitch greensea">
                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="show-notifications">
                  <label class="onoffswitch-label" for="show-notifications">
                                                        <span class="onoffswitch-inner"></span>
                                                        <span class="onoffswitch-switch"></span>
                                                    </label>
                </div>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>

  </div>

</aside>
